<template>
  <div class="help-box" :style="styles">
    <template v-if="type == 'text'">
      <span v-if="!hideIcon" class="icon icon-tishi mr5"></span>
      <slot></slot>
    </template>
    <template v-else>
      <el-alert :type="type" :title="false" :closable="false" >
        <template #title>
          <span v-if="!hideIcon" class="icon icon-tishi mr5"></span>
          <slot></slot>
        </template>
      </el-alert>
    </template>
  </div>
</template>
<script lang="ts" name="help" setup>
import { computed, StyleValue } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = withDefaults(
  defineProps<{
    type?: string;
    color?: string;
    width?: string;
    hideIcon?: boolean;
  }>(),
  {
    type: "text",
    color: "var(--base-grey)",
    width: "100%",
    hideIcon: false,
  }
);

const styles = computed<StyleValue>(() => {
  return [
    props.color ? `color: ${props.color}` : "",
    `width: ${props.width}`,
  ];
});
</script>
<style scoped>
.help-box {
  font-size: 12px;
}
</style>